<template>
	<view class="rankBox">
		<template v-if="data?.length > 0">
			<view class="rankBox-tr" :key="index" v-for="(item, index) in data">
				<view
					class="ranking"
					:style="{
						background: bgColors?.[index] || '#eee',
						color: textColors?.[index] || '#000'
					}"
				>
					<text>{{ index + 1 }}</text>
				</view>
				<view
					class="rankBox-td"
					:style="{
						textAlign: th.align,
						width: `${th.width}rpx`,
						flex: th.width ? '' : 1,
						color: th.color
					}"
					:key="index"
					v-for="(th, thIndex) in thead"
				>
					<text v-if="th.prop && item[th.prop] !== undefined">{{ item[th.prop] }}</text>
					<text v-else>--</text>
				</view>
			</view>
		</template>
		<my-empty v-else :height="200" text="暂无排行数据"></my-empty>
	</view>
</template>

<script lang="uts" setup>
//公共状态
import { useVue  } from '@/utils/useVue.uts'
const { reactive, ref,app,Token,onMounted,watch,http,goToPage } = useVue()
interface Props {
	data ?: any,//数据
	thead ?: any,//数据
	bgColors ?: any,//颜色
	textColors ?: any,//颜色
}
const props = withDefaults(defineProps<Props>(), {
	data:[],
	thead:[],
	bgColors: ['#ffae1f','#b1c1db','#ffb897'],
	textColors: ['#fff','#fff','#fff']
})
// 表单数据
const formData:any = reactive({

})
//搜索
</script>

<style scoped lang="scss">
.rankBox {
	.rankBox-tr {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		line-height: 68rpx;
		overflow: hidden;
		position: relative;
		&:not(:last-child) {
			&::after {
				content: '';
				position: absolute;
				left: 80rpx;
				bottom: 0;
				right: 0;
				border-bottom: 1rpx #eee solid;
			}
			padding-bottom: 8px;
			margin-bottom: 8px;
		}
		.ranking {
			width: 56rpx;
			height: 56rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			background: #eee;
			border-radius: 100rpx;
		}
		.rankBox-td {
			-webkit-line-clamp: 1; /* 限制文本显示的行数为2行 */
			-webkit-box-orient: vertical; /* 设置盒模型布局方向为垂直 */
			display: -webkit-box; /* 使用旧版WebKit内核布局盒模型 */
			overflow: hidden; /* 超出部分隐藏 */
			text-overflow: ellipsis; /* 使用省略号表示被截断的部分 */
			margin-left: 16rpx;
		}
	}
}
</style>
